<script setup lang="ts">
import { reactive, inject, provide } from 'vue';
import { useRouter } from 'vue-router';
import { contractAdd } from '@/api/contract';
import { Toast } from 'vant';
import { taskStore } from '@/store/task'
import { myStore } from '@/store/my'
import TalentList from './components/TalentList.vue'
import ContractDemand from './components/ContractDemand.vue'
const store = myStore()
const time = new Date()
const state:any = reactive({
    talentBool: false,
    contractDemandBool: false,
    serviceModeBool: false,
    showStartTime: false,
    showEndTime: false,
    serviceModeList: [
        {
            name: '按月结算'
        },
        {
            name: '按任务结算'
        }
    ],
    loading: false,
    taskName: '',
    talentName: '',
    talentId: '',
    taskBudget: '',
    startTime: '',
    endTime: '',
    serviceMode: '',
    contractDemand: '',
    minDate: new Date(time.getFullYear() - 1, time.getMonth(), time.getDate()),
    maxDate: new Date(time.getFullYear() + 3, time.getMonth(), time.getDate())
})
const leftBack = () => history.back();
const setTaskModify = async () => {
    if (!state.taskName) {
        Toast('请填写合约名称')
        return
    }
    if (!state.talentName) {
        Toast('请选择企业人才')
        return
    }
    if (!state.taskBudget) {
        Toast('请输入合约预算')
        return
    }
    if (!state.startTime) {
        Toast('请选择合约开始时间')
        return
    }
    if (!state.endTime) {
        Toast('请选择合约结束时间')
        return
    }
    if (!state.serviceMode) {
        Toast('请选择服务方式')
        return
    }
    if (!state.contractDemand) {
        Toast('请选择合约要求')
        return
    }
    state.loading = true
    const res = await contractAdd({
        "contract_type": "技术服务",
        "contract_name": state.taskName,
        "task_salary": state.taskBudget,
        "start_cycle_time": state.startTime,
        "end_cycle_time": state.endTime,
        "check_out": state.serviceMode,
        "task_ask": state.contractDemand,
        "user_id": state.talentId
    })
    if (res) {
        Toast('添加成功')
        leftBack()
    } else {
        Toast('添加失败')
    }
    state.loading = false
}
const closeTalent = (item:any) => {
    state.talentName = item.user_name
    state.talentId = item.id
    state.talentBool = false
}
const serviceModeSelect = (value:any) => {
    state.serviceMode = value.name
    state.serviceModeBool = false
}
const closeDemand = (value:any) => {
    if (value) {
        state.contractDemand = value
    }
    state.contractDemandBool = false
}
const startTimeConfirm = (value:any) => {
    state.startTime = value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate()
    state.showStartTime = false
}
const endTimeConfirm = (value:any) => {
    state.endTime = value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate()
    state.showEndTime = false
}
provide('popup', {
    closeTalent,
    closeDemand
})
</script>
<template>
    <van-nav-bar title="新建合约" left-arrow @click-left="leftBack" />
    <div class="user-page">
        <van-form @submit="setTaskModify">
            <div class="user-item">
                <h5>合约名称</h5>
                <van-field v-model="state.taskName" label="" placeholder="请输入合约名称" />
            </div>
            <div class="user-item">
                <h5>IT企业人才</h5>
                <van-field v-model="state.talentName" label="" placeholder="请选择合约人才" readonly is-link
                    @click="state.talentBool = true" />
            </div>
            <div class="user-item">
                <h5>合约薪资</h5>
                <van-field class="budget" v-model="state.taskBudget" label="" type="number" placeholder="请输入合约薪资" />
            </div>
            <div class="user-item">
                <h5>合约周期</h5>
                <div class="work-time-list">
                    <van-field v-model="state.startTime" readonly label="" placeholder="请选择"
                        @click="state.showStartTime = true" />
                    <span></span>
                    <van-field v-model="state.endTime" readonly label="" placeholder="请选择"
                        @click="state.showEndTime = true" />
                    <div class="van-field__right-icon"><i class="van-badge__wrapper van-icon van-icon-arrow"></i></div>
                </div>
                <van-action-sheet v-model:show="state.showStartTime">
                    <van-datetime-picker type="date" title="选择年月日" :min-date="state.minDate" :max-date="state.maxDate"
                        @confirm="startTimeConfirm" @cancel="state.showStartTime = false" />
                </van-action-sheet>
                <van-action-sheet v-model:show="state.showEndTime">
                    <van-datetime-picker type="date" title="选择年月日" :min-date="state.minDate" :max-date="state.maxDate"
                        @confirm="endTimeConfirm" @cancel="state.showEndTime = false" />
                </van-action-sheet>
            </div>
            <div class="user-item">
                <h5>结薪方式</h5>
                <van-field v-model="state.serviceMode" label="" placeholder="请选择结薪方式" readonly right-icon="arrow"
                    @click="state.serviceModeBool = true" />
                <van-action-sheet v-model:show="state.serviceModeBool" :actions="state.serviceModeList" cancel-text="取消"
                    @select="serviceModeSelect"></van-action-sheet>
            </div>
            <div class="user-item">
                <h5>合约要求</h5>
                <van-field v-model="state.contractDemand" label="" placeholder="请填写合约要求" readonly right-icon="arrow"
                    @click="state.contractDemandBool = true" />
            </div>
            <button class="wy-confirm-btn" native-type="submit">完成</button>
        </van-form>
        <!--人才弹窗-->
        <van-popup v-model:show="state.talentBool" position="top" duration="0"
            :style="{ width: '100%', height: '100%' }">
            <TalentList></TalentList>
        </van-popup>
        <!--任务要求-->
        <van-popup v-model:show="state.contractDemandBool" position="top" duration="0"
            :style="{ width: '100%', height: '100%' }">
            <ContractDemand></ContractDemand>
        </van-popup>
    </div>
</template>
<style scoped>
:deep(.van-image__img) {
    border-radius: 50%;
}

:deep(.van-uploader__upload) {
    margin: 0;
}

.user-page {
    margin: 1.47rem 0.6rem;
    padding-bottom: 1rem;
}

.task-switch {
    position: relative;
}

:deep(.van-switch) {
    position: absolute;
    top: 0.4rem;
    right: 0.6rem;
    transform: scale(0.8);
}

:deep(.van-switch--on) {
    background: linear-gradient(90deg, #FEA829, #FE8F27);
}

.budget {
    position: relative;
}

.budget::before {
    position: absolute;
    right: 0.9rem;
    content: '元';
    font-size: 0.8rem;
    font-weight: 300;
    color: #333333;
}

.work-time-list {
    display: flex;
    align-items: center
}

.work-time-list span {
    width: 0.43rem;
    height: 0.05rem;
    margin-right: 2.4rem;
    background: #999999;
}

.work-time-list .van-cell {
    width: 6rem;
}

.work-time-list .van-field__right-icon {
    text-align: right;
    flex: 1;
    margin-right: 0.5rem;
}

.wy-confirm-btn {
    height: 2.35rem;
    line-height: 2.35rem;
    background: linear-gradient(90deg, #FEA829, #FE8F27);
    border-radius: 0.27rem;
    width: calc(100vw - 1.2rem);
    border: 0;
    position: fixed;
    left: 0;
    bottom: 0;
    margin: 0 0.6rem 0.6rem;
    font-size: 0.8rem;
    color: #FFFFFF;
}
</style>